

function BackgroundIllustration(props) {
  return (
    <svg
      viewBox="0 0 1090 1090"
      aria-hidden="true"
      fill="none"
      preserveAspectRatio="none"
      {...props}
    >
      <circle cx={545} cy={545} r="544.5" />
      <circle cx={545} cy={545} r="480.5" />
      <circle cx={545} cy={545} r="416.5" />
      <circle cx={545} cy={545} r="352.5" />
    </svg>
  )
}

export function AuthLayout({ title, subtitle, children }) {
  return (
    <main className="flex min-h-full overflow-hidden pt-8 sm:pt-16 sm:py-28 sm:bg-gray-100">
      <div className="mx-auto flex items-center sm:w-[56rem] flex-col px-8 sm:px-16 bg-white sm:rounded-5xl">
        <div className="relative mt-12 sm:mt-16">
          <BackgroundIllustration
            width="1090"
            height="1090"
            className="absolute -z-1 -top-7 left-1/2 h-[788px] -translate-x-1/2 stroke-gray-300/30 [mask-image:linear-gradient(to_bottom,white_20%,transparent_75%)] sm:-top-9 sm:h-auto"
          />
        </div>
        <div className="relative">
          <h1 className="text-center text-2xl font-medium tracking-tight text-gray-900">
            {title}
          </h1>
          {subtitle && (
            <p className="mt-3 text-center text-lg text-gray-600">{subtitle}</p>
          )}
        </div>
        <div className="w-full px-4 py-0 pb-6 z-20 sm:bg-white sm:shadow-2xl sm:shadow-gray-900/10 sm:m-10 sm:w-[32rem] sm:rounded-5xl sm:p-20 sm:py-10">
          {children}
        </div>
      </div>
    </main>
  )
}
export function SignUpLayout({ title, subtitle, children }) {
  return (
    <main className="flex min-h-full overflow-hidden pt-8 sm:pt-16 sm:py-28 sm:bg-gray-100">
      <div className="mx-auto flex items-center sm:w-[91rem] flex-col px-8 sm:px-16 bg-white sm:rounded-5xl">
        <div className="relative mt-12 sm:mt-16">
          <BackgroundIllustration
            width="1090"
            height="1090"
            className="absolute z-10 -top-7 left-1/2 h-[788px] -translate-x-1/2 stroke-gray-300/30 [mask-image:linear-gradient(to_bottom,white_20%,transparent_75%)] sm:-top-9 sm:h-auto"
          />
        </div>
        <div className="relative">
          <h1 className="text-center text-2xl font-medium tracking-tight text-gray-900">
            {title}
          </h1>
          {subtitle && (
            <p className="mt-3 text-center text-lg text-gray-600">{subtitle}</p>
          )}
        </div>
        {
          children && <div className="w-[22rem] px-4 py-0 pb-6 z-20 sm:bg-white sm:shadow-2xl sm:shadow-gray-900/10 sm:m-10 sm:w-[64rem] sm:rounded-5xl sm:p-20 sm:py-10">
            {children}
          </div>
        }
      </div>
    </main>
  )
}